<template>
  <!-- 表格 -->
  <el-table border style="width: 100%" :data="vip">
    <el-table-column prop="imageUrl" label="产品图片" align="center">
      <template #default="scope">
        <el-avatar
          :src="scope.row.imageUrl"
          shape="square"
          style="width: 120px"
        >
          <img
            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
          />
        </el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="productName"
      label="产品名称"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column prop="description" label="产品描述" align="center" />
    <el-table-column prop="price" label="价格(元)" align="center" />
    <el-table-column prop="inventory" label="库存" align="center" />
    <el-table-column prop="address" label="操作" align="center">
      <template #default="scope">
        <el-button
          style="background-color: hotpink; width: 100px; color: white"
          @click="handleOrder(scope.row)"
        >
          <svg style="width: 30px; color: white">
            <use xlink:href="#icon-vip3"></use>
          </svg>
          充值
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from 'vue';
import { useUser } from '../../../../store/users';
import * as api1 from '../../../../api/vip';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
let router = useRouter();
let vip = ref([]);
api1.getProductApi('20210827165510715').then((res) => {
  // console.log(res.data.data);
  //把请求的结果存储到pinia
  vip.value = res.data.data;
  // console.log(vip.value);
});
let handleOrder = (row) => {
  ElMessageBox({
    title: '充值提示',
    message: `您确定要充值  <b>  ${row.productName} </b>  该会员吗?`,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    dangerouslyUseHTMLString: true
  })
    .then(() => {
      console.log(row);
      router.push('/preOrder?product_id=' + row.product_id);
    })
    .catch(() => {
      ElMessage.warning({
        message: '取消购买'
      });
    });
};
</script>
<script>
export default {
  meta: {
    name: '会员充值',
    title: 'vipPayMoney',
    icon: '#icon-chongzhi'
  
  }
};
</script>
<style scoped>
.bread {
  margin: 20px;
}
</style>
